<template>
  <div class="app-container">
    <el-card class="box-card">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="118px">
      <el-form-item label="出厂唯一标识码" prop="identificationCode">
        <el-input
          v-model="queryParams.identificationCode"
          placeholder="请输入出厂唯一标识码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="特征号" prop="characteristicNum">
        <el-input
          v-model="queryParams.characteristicNum"
          placeholder="请输入特征号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input
          v-model="queryParams.quantity"
          placeholder="请输入数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="批次号" prop="batchNum">
        <el-input
          v-model="queryParams.batchNum"
          placeholder="请输入批次号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="企业" prop="partNumber" v-show="showSearch">
        <el-input
          v-model="queryParams.partNumber"
          placeholder="请输入企业"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同编号" prop="contractNo" v-show="showSearch">
        <el-input
          v-model="queryParams.contractNo"
          placeholder="请输入合同编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
   <!--   <el-form-item label="提交单号" prop="submissionNo">
        <el-input
          v-model="queryParams.submissionNo"
          placeholder="请输入提交单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="提交单拍照" prop="submitPhoto">
        <el-input
          v-model="queryParams.submitPhoto"
          placeholder="请输入提交单拍照"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="验收人" prop="acceptedPerson">
        <el-input
          v-model="queryParams.acceptedPerson"
          placeholder="请输入验收人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="验收时间" prop="acceptedTime">
        <el-date-picker clearable
          v-model="queryParams.acceptedTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择验收时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="拍照上传合格证" prop="uploadCertificate">
        <el-input
          v-model="queryParams.uploadCertificate"
          placeholder="请输入拍照上传合格证"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
      <br/>
      <div style="text-align: right;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </div>
      <br/>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['module:cjl:delivery:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['module:cjl:delivery:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['module:cjl:delivery:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['module:cjl:delivery:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="multiple"
          @click="handleMuSumbit"
          v-hasPermi="['module:cjl:delivery:sumbit']"
        >填报提交单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="multiple"
          @click="handleMuQuali"
          v-hasPermi="['module:cjl:delivery:quali']"
        >上传合格证</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="deliveryList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" :index="indexMethod" align="center" />
      <el-table-column label="出厂唯一标识码" align="center" prop="identificationCode" v-if="columns[0].visible"/>
      <el-table-column label="产品类型" align="center" prop="productType" v-if="columns[1].visible"/>
      <el-table-column label="特征号" align="center" prop="characteristicNum" v-if="columns[2].visible"/>
      <el-table-column label="数量" align="center" prop="quantity" v-if="columns[3].visible"/>
      <el-table-column label="批次号" align="center" prop="batchNum" v-if="columns[4].visible"/>
      <el-table-column label="企业" align="center" prop="partNumber" v-if="columns[5].visible"/>
      <el-table-column label="合同编号" align="center" prop="contractNo" v-if="columns[6].visible"/>
      <el-table-column label="提交单号" align="center" prop="submissionNo" v-if="columns[7].visible"/>
      <el-table-column label="提交单拍照" align="center" prop="submitPhoto" v-if="columns[8].visible">
        <template slot-scope="scope">
          <ImagePreview style="width:80px;height:80px;border:none;" :src="scope.row.submitPhoto" />
         <!-- <el-button type="text" size="medium" @click="downloadEvt(scope.row)">查看照片</el-button>-->
        </template>
      </el-table-column>
      <el-table-column label="验收人" align="center" prop="acceptedPerson" v-if="columns[9].visible"/>
      <el-table-column label="验收时间" align="center" prop="acceptedTime" width="180" v-if="columns[10].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.acceptedTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="拍照上传合格证" align="center" prop="uploadCertificate" v-if="columns[11].visible">
        <template slot-scope="scope">
          <ImagePreview style="width:80px;height:80px;border:none;" :src="scope.row.uploadCertificate" />
          <!-- <el-button type="text" size="medium" @click="downloadEvt(scope.row)">查看照片</el-button>-->
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" v-if="columns[12].visible"/>
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['module:cjl:delivery:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['module:cjl:delivery:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleSumbit(scope.row)"
            v-hasPermi="['module:cjl:delivery:sumbit']"
          >填报提交单</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleQuali(scope.row)"
            v-hasPermi="['module:cjl:delivery:quali']"
          >上传合格证</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleView(scope.row)"
            v-hasPermi="['module:cjl:delivery:view']"
          >详细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </el-card>
    <!-- 添加或修改产品交付对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-container>
          <el-main>
            <el-row>
              <el-col :span="12">
        <el-form-item label="出厂唯一标识码" prop="identificationCode">
          <el-input v-model="form.identificationCode" placeholder="请输入出厂唯一标识码" clearable/>
        </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品类型" prop="productType">
                  <el-select v-model="form.productType" multiple placeholder="请选择产品类型" style="width: 100%" clearable>
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                <!--  <el-input v-model="form.productType" placeholder="请输入产品类型" />-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="特征区分标记" prop="characteristicNum">
                  <el-input v-model="form.characteristicNum" placeholder="请输入特殊颜色，特殊形状等快速分别同类型产品关键词" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
        <el-form-item label="数量" prop="quantity">
          <el-input-number v-model="form.quantity" controls-position="right" :min="0" style="width: 100%" placeholder="请输入数量" clearable/>
          <!--<el-input v-model="form.quantity" placeholder="请输入数量" />-->
        </el-form-item>
              </el-col>
            </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="批次号" prop="batchNum">
                    <el-input v-model="form.batchNum" placeholder="请输入批次号" clearable/>
                  </el-form-item>
                </el-col>
              <el-col :span="12">
        <el-form-item label="企业" prop="partNumber">
          <el-input v-model="form.partNumber" placeholder="请输入企业" clearable/>
        </el-form-item>
              </el-col>
              </el-row>
            <el-row>
            <el-col :span="12">
              <el-form-item label="合同编号" prop="contractNo">
                <el-input v-model="form.contractNo" placeholder="请输入合同编号" clearable/>
              </el-form-item>
            </el-col>
            </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="500"/>
        </el-form-item>
          </el-main>
        </el-container>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 填写提交单产品交付对话框 -->
    <el-dialog :title="sumbit.title" :visible.sync="sumbit.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-container>
          <el-main>
            <el-row>
              <el-col :span="24">
                <el-form-item label="提交单号" prop="submissionNo">
                  <el-input v-model="form.submissionNo" placeholder="请输入提交单号" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="提交单拍照" prop="submitPhoto">
                  <image-upload :limit="1" v-model="form.submitPhoto"  style="text-align: center;"/>
                  <!--<el-input v-model="form.submitPhoto" placeholder="请输入提交单拍照" />-->
                </el-form-item>
              </el-col>
              </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="验收人" prop="acceptedPerson">
                  <el-input v-model="form.acceptedPerson" placeholder="请输入验收人" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="验收时间" prop="acceptedTime">
                    <el-date-picker clearable
                                    v-model="form.acceptedTime"
                                    type="date"
                                    style="width: 100%"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择验收时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlesubmitForm">确 定</el-button>
        <el-button @click="submitcancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 多条填写提交单产品交付对话框 -->
    <el-dialog :title="musumbit.title" :visible.sync="musumbit.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-container>
          <el-main>
            <el-row>
              <el-col :span="24">
                <el-form-item label="提交单号" prop="submissionNo">
                  <el-input v-model="form.submissionNo" placeholder="请输入提交单号" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="提交单拍照" prop="submitPhoto">
                  <image-upload :limit="1" v-model="form.submitPhoto"  style="text-align: center;"/>
                  <!--<el-input v-model="form.submitPhoto" placeholder="请输入提交单拍照" />-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="验收人" prop="acceptedPerson">
                  <el-input v-model="form.acceptedPerson" placeholder="请输入验收人" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="验收时间" prop="acceptedTime">
                  <el-date-picker clearable
                                  v-model="form.acceptedTime"
                                  type="date"
                                  style="width: 100%"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择验收时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleMuForm">确 定</el-button>
        <el-button @click="musubmitcancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 拍照上传合格证交付对话框 -->
    <el-dialog :title="quali.title" :visible.sync="quali.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="拍照上传合格证" prop="uploadCertificate">
          <image-upload :limit="1" v-model="form.uploadCertificate" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qualiForm">确 定</el-button>
        <el-button @click="qualicancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 多条拍照上传合格证交付对话框 -->
    <el-dialog :title="muquali.title" :visible.sync="muquali.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="拍照上传合格证" prop="uploadCertificate">
          <image-upload  :limit="1" v-model="form.uploadCertificate" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="muqualiForm">确 定</el-button>
        <el-button @click="muqualicancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的产品台账数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="danger" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDelivery, getDelivery, delDelivery, addDelivery, updateDelivery } from "@/api/module/cjl/delivery";
import { listProduct} from "@/api/module/gs/product/product";
import { getToken } from "@/utils/auth";
import watermark from "watermark-dom";
export default {
  name: "Delivery",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 产品交付表格数据
      deliveryList: [],
      //产品类型选项
      options: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        identificationCode: null,
        productType: null,
        characteristicNum: null,
        quantity: null,
        batchNum: null,
        partNumber: null,
        contractNo: null,
        submissionNo: null,
        submitPhoto: null,
        acceptedPerson: null,
        acceptedTime: null,
        uploadCertificate: null,
        userId: null,
        deptId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null,
        orderByColumn:"createTime",
        isAsc:"desc"
      },
      // 填报提交单查询参数
      sumbit:{
        // 是否显示弹出层（用户查询）
        open: false,
        // 弹出层标题（用户查询）
        title: "",
      },
      // 多选填报提交单查询参数
      musumbit:{
        // 是否显示弹出层（用户查询）
        open: false,
        // 弹出层标题（用户查询）
        title: "",
      },
      // 上传合格证参数
      quali:{
        // 是否显示弹出层（用户查询）
        open: false,
        // 弹出层标题（用户查询）
        title: "",
      },
      // 多条上传合格证参数
      muquali:{
        // 是否显示弹出层（用户查询）
        open: false,
        // 弹出层标题（用户查询）
        title: "",
      },
      // 表单参数
      form: {},
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/module/cjl/delivery/importData"
      },
      // 列信息
      columns: [
        { key: 0, label: `出厂唯一标识码`, visible: true },
        { key: 1, label: `产品类型`, visible: true },
        { key: 2, label: `特征号`, visible: true },
        { key: 3, label: `数量`, visible: true },
        { key: 4, label: `批次号`, visible: true },
        { key: 5, label: `企业`, visible: false },
        { key: 6, label: `合同编号`, visible: true },
        { key: 7, label: `提交单号`, visible: false },
        { key: 8, label: `提交单拍照`, visible: false },
        { key: 9, label: `验收人`, visible: false },
        { key: 10, label: `验收时间`, visible: false },
        { key: 11, label: `拍照上传合格证`, visible: false },
        { key: 12, label: `备注`, visible: false },
      ],
      // 表单校验
      rules: {
        identificationCode: [
          { required: true, message: "出厂唯一标识码不能为空", trigger: "blur" },
        ],
        productType: [
          { required: true, message: "产品类型不能为空", trigger: "blur" },
        ],
        characteristicNum: [
          { required: true, message: "特征号不能为空", trigger: "blur" },
        ],
        /*contractNo: [
          { required: true, message: "合同编号不能为空", trigger: "blur" },
        ],*/
        batchNum: [
          { required: true, message: "批次号不能为空", trigger: "blur" },
        ],
        submissionNo: [
          { required: true, message: "提交单号不能为空", trigger: "blur" },
        ],
        acceptedPerson: [
          { required: true, message: "验收人不能为空", trigger: "blur" },
        ],
        /*submitPhoto: [
          { required: true, message: "提交单拍照不能为空", trigger: "blur" },
        ],*/
        acceptedTime: [
          { required: true, message: "验收时间不能为空", trigger: "blur" },
        ],
        uploadCertificate: [
          { required: true, message: "拍照上传合格证不能为空", trigger: "blur" },
        ],
      }
    };
  },
  mounted() {
    watermark.load({ watermark_txt: "  "   });
  },
  created() {
    this.getList();
    this.getProduct();
  },
  methods: {
    //下拉列表获取所有产品信息
    getProduct() {
      listProduct().then(response => {
        let data = response.rows;
        for (let i = 0; i < data.length; i++) {
          if (data[i].differentiateStates == '0') {
            this.options.push({
              value: data[i].productType,
              label: data[i].productType,
            })
          }
        }
      });
    },
    downloadEvt(row,url, fileName = '提交单照片') {
      const id = row.id || this.ids
      getDelivery(id).then(response => {
        this.form = response.data;
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
      fileName && el.setAttribute('download', fileName);
      url= this.$store.state.user.ipaddress+this.form.submitPhoto
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
      });
    },
    downloadEvt1(row,url, fileName = '合格证照片') {
      const id = row.id || this.ids
      getDelivery(id).then(response => {
        this.form = response.data;
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
      fileName && el.setAttribute('download', fileName);
      url= this.$store.state.user.ipaddress+this.form.uploadCertificate
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
      });
    },
    indexMethod(index) {
      index = (index + 1) + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      return index
    },
    /** 查询产品交付列表 */
    getList() {
      this.loading = true;
      listDelivery(this.queryParams).then(response => {
        this.deliveryList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    submitcancel() {
      this.sumbit.open = false;
      this.reset();
    },
    // 取消按钮
    musubmitcancel() {
      this.musumbit.open = false;
      this.reset();
    },
    // 取消按钮
    qualicancel() {
      this.quali.open = false;
      this.reset();
    },
    // 取消按钮
    muqualicancel() {
      this.muquali.open = false;
      this.reset();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        identificationCode: null,
        productType: null,
        characteristicNum: null,
        quantity: null,
        batchNum: null,
        partNumber: null,
        contractNo: null,
        submissionNo: null,
        submitPhoto: null,
        acceptedPerson: null,
        acceptedTime: null,
        uploadCertificate: null,
        userId: null,
        deptId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.is=selection.map(item => item.identificationCode)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加产品交付";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getDelivery(id).then(response => {

        this.form = response.data;
        let dataIntArr=[];
        //多级选择器回显 ,先转换成String类型的数组，再转换成整型
        let data = response.data.productType
        //如果不为空，则进行处理
        if(data !=null){
          let arr = data.split(',');
          console.log(arr+'777')
          dataIntArr.push(data);
          // arr.forEach(item => {
          //   dataIntArr.push(+item);
          // })
          this.form.productType = dataIntArr
        }
        this.open = true;
        this.title = "修改产品交付";
      });
    },
    /** 填写提交单按钮操作 */
    handleSumbit(row) {
      this.reset();
      const id = row.id || this.ids
      getDelivery(id).then(response => {
        this.form = response.data;
        this.sumbit.open = true;
        this.sumbit.title = "填报提交单";
      });
    },
    /** 多条填写提交单按钮操作 */
    handleMuSumbit(row) {
      this.reset();
      const ids = row.id || this.ids
        this.form.id = ids;
        this.musumbit.open = true;
        this.musumbit.title = "填报提交单";
    },
    /** 多条填写提交单提交操作 */
    handleMuForm() {
     this.$refs["form"].validate(valid => {
      if (valid) {
        if (this.form.id != null) {
          var i;
          var ids = this.form.id;
          for(i= 0;i<ids.length;i++){
            this.form.id = ids[i];
            updateDelivery(this.form);
          }
          if(i == ids.length){
            this.$modal.msgSuccess("提交成功");
            this.form.id = ids;
            this.musumbit.open = false;
            this.muquali.open = true;
            this.muquali.title = "上传合格证";
          }
        }
    }
  });
},
    /** 单条填写提交单提交操作 */
    handlesubmitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateDelivery(this.form).then(response => {
              this.$modal.msgSuccess("提交成功");
              this.sumbit.open = false;
              this.quali.open = true;
              this.quali.title = "上传合格证";
            });
          }
        }
      });
    },
    /** 单条填写上传合格证按钮操作 */
    handleQuali(row) {
      this.reset();
      const id = row.id || this.ids
      getDelivery(id).then(response => {
        this.form = response.data;
        this.quali.open = true;
        this.quali.title = "上传合格证";
      });
    },
    /** 单条提交上传合格证按钮操作 */
    qualiForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateDelivery(this.form).then(response => {
              this.$modal.msgSuccess("提交成功");
              this.quali.open = false;
            });
          }
        }
      });
    },
    /** 上传合格证按钮操作 */
    handleMuQuali(row) {
      this.reset();
      const ids = row.id || this.ids
       this.form.id = ids;
       this.muquali.open = true;
       this.muquali.title = "上传合格证";
   },
    /** 多条上传合格证按钮操作 */
    muqualiForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            var i;
            var ids = this.form.id;
            for(i= 0;i<ids.length;i++){
              this.form.id = ids[i];
              updateDelivery(this.form);
            }
            if(i == ids.length){
              this.$modal.msgSuccess("提交成功");
              this.muquali.open = false;
            }
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            //后台接收的数据是string类型，前台传值需要把数组类型的数据转换成string类型
            if(this.form.productType!= undefined){
              this.form.productType = this.form.productType.toString()
            }
            updateDelivery(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            //后台接收的数据是string类型，前台传值需要把数组类型的数据转换成string类型
            if(this.form.productType!= undefined){
              this.form.productType = this.form.productType.toString()
            }
            addDelivery(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 详细按钮操作 */
    handleView(row) {
      const id = row.id;
      this.$router.push({ path:"/hetong/delivery_detail", query: {id}});
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const i=row.identificationCode || this.is;
      this.$modal.confirm('是否确认删除出厂唯一标识码为"' + i + '"的数据项？').then(function() {
        return delDelivery(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('module/cjl/delivery/export', {
        ...this.queryParams
      }, `delivery_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "产品交付台账信息导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('module/cjl/delivery/importTemplate', {
      }, `delivery_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
<style>
  .el-header, .el-footer {
    background-color: #FFFFFF;
    color: #333;
    text-align: left;
    line-height: 60px;
    font-style: oblique;

  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /*对话框标题样式*/
  .el-dialog__title{
    /*color: #1ab394;*/
    font-weight: bold;
    font-size: 25px;
  }
</style>
